<script>
export default {
    data() { 
        return {
            /*
                 this.$router.push({path:'路由的路径'})
                  this.$router.push({name:'路由的名称'})
            */
        }
    }, methods: {
        goto(gotopath,gotoname) { 
            this.$router.push(
                {
                     //path: gotopath,
                    name: gotoname
                }
            )
        },
        oneBtn() { 
            this.$router.push(
                {
                    name: 'parent',
                    query: {
                        name:'萧炎'
                    }
                }
            )
        },
        twoBtn() { 
            this.$router.push(
                {
                    name: 'parent',
                    params: {
                        username:'萧薰儿'
                    }
                }
            )
        }
    }
}

</script>

<template>
    <!--这是所有路由的总出口  只要你需要在某个页面下 显示 你就需要在某个页面下去编写
    router-view
    -->
    <div class="footer-header">
    <img src="./assets/login.jpg" width="130px" height="40px">
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/find">发现音乐</RouterLink>
    <RouterLink to="/my">我的音乐</RouterLink>
    <RouterLink to="/friend">关注</RouterLink>
    <RouterLink to="/parent">朋友圈</RouterLink>
    <RouterLink to="/parent?name=萧炎">朋友-萧炎</RouterLink>
    <RouterLink to="/parent/萧熏儿">朋友-萧熏儿</RouterLink>
    </div>
    <!--编程式导航-->
     <!-- <div class="footer-header">
        <img src="./assets/login.jpg" width="130px" height="40px">
        <span @click="goto('/','home')" style="color: red;">首页</span> &nbsp;
        <span @click="goto('/find', 'find')"  style="color: red;">发现音乐</span>&nbsp;
        <span @click="goto('/my', 'my')"  style="color: red">我的音乐</span>&nbsp;
        <span @click="goto('/parent', 'parent')" style="color: red">我的朋友</span>
        <span @click="oneBtn" style="color: rgb(8, 234, 65)">朋友--萧炎</span>
        <span @click="twoBtn" style="color: rgb(8, 234, 65)">朋友--萧薰儿</span>
    </div> -->
    
    <div class="top">
     <router-view></router-view>
    </div>
   
    <!-- <RouterView></RouterView> -->
</template>

<style scoped>

.footer-header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #333;
    display: flex;
    text-align: center;
}

 .footer-header a{
    flex: 1;
    text-decoration: none;
    padding: 20px 0;
    line-height: 20px;
    background-color: #333;
    color: #ccc;
    border: 1px solid black;
    }
.footer-header a:hover{
     background-color: #555;
}

.top {
  padding-top: 61px;
}
</style>
<style>
*{
    margin: 0;
    padding: 0;
}
</style>
